import { useEffect, useState } from "react";
import { Container, Placeholder } from "react-bootstrap";
import { useParams } from "react-router-dom";
import api from "../request";
import { textToParagraphs } from "../utils";
import { Loading, LoadingContent, LoadingSkeleton } from "../Component/Loading";
import PoemList from "../Component/PoemList";

function AuthorDetailPage() {
    let params = useParams();
    let authorId = params.id;
    let [author, setAuthor] = useState(null);
    let [poems, setPoems] = useState(null);

    useEffect(() => {
        api.getAuthorById(authorId, (err, data, _) => {
            if (err) throw err;
            setAuthor(data.data);
        });

        api.listPoemsByAuthorId(authorId, { page: 0, size: 100 }, (err, data, _) => {
            if (err) throw err;
            setPoems(data.data.list);
        });
    }, [params]);

    return (
        <Container>
            <Loading loaded={author}>
                <LoadingContent>
                    <div>
                        <h1 className="d-inline me-2">{author?.name}</h1>
                        <span className="ff-fangsong text-muted">【{author?.dynasty}】</span>
                    </div>
                    <div className="mt-3">
                        {textToParagraphs(author?.desc)}
                    </div>
                    <div>
                        <h2>作品</h2>
                        <PoemList poems={poems} />
                    </div>
                </LoadingContent>
                <LoadingSkeleton>
                    <Placeholder as="h1" animation="wave">
                        <Placeholder xs={3}></Placeholder>
                    </Placeholder>
                    <Placeholder as="p" xs="12"></Placeholder>
                    <Placeholder as="p" xs="12"></Placeholder>
                    <Placeholder as="p" xs="12"></Placeholder>
                    <Placeholder as="h2" animation="wave">
                        <Placeholder xs={3}></Placeholder>
                    </Placeholder>
                    <Placeholder as="ol" xs="12">
                        <Placeholder as="li" xs="4"></Placeholder>
                        <Placeholder as="li" xs="4"></Placeholder>
                        <Placeholder as="li" xs="4"></Placeholder>
                        <Placeholder as="li" xs="4"></Placeholder>
                        <Placeholder as="li" xs="4"></Placeholder>
                    </Placeholder>
                </LoadingSkeleton>
            </Loading>
        </Container>
    );
}

export default AuthorDetailPage;